<script setup lang="ts">
import { ref } from 'vue'
import { addAddressHttp, getAddressDetailHttp, updateAddressHttp} from '@/services/addressService'
import { onLaunch, onLoad } from '@dcloudio/uni-app'
// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})



const query = defineProps<{
  id:string
}>()
console.log('路由参数 :',query);
// 动态设置标题
uni.setNavigationBarTitle({
  title: query.id?'编辑地址':'新建地址',
})


const  changeRegion:UniHelper.RegionPickerOnChange = (e)=>{
  console.log(e.detail);
  
  form.value.fullLocation = e.detail.value.join(' ')
  const [provincde,city,country] = e.detail.code!
  Object.assign(form.value,{
    provinceCode:provincde,
    cityCode:city,
    countyCode:country,
  })
}

const changeIsDefault :UniHelper.SwitchOnChange= (e)=>{
  console.log('切换是否默认地址e：',e);
  form.value.isDefault = e.detail.value?1:0
}
/**
 * 
 * 保存地址
*/
const basicFormRef = ref<UniHelper.UniFormsInstance>()
const addOrEditAddress = async ()=>{
  
  // basicFormRef.value?.validate // 指定了类型，就有提示了。
  
  // 没有用async
  // basicFormRef.value?.validate?.()
  // .then(res=>{
  //   console.log('表单校验res：',res);
    
  // })
  
  try {
     // 使用async
  await basicFormRef.value?.validate?.()
  let res
    // 新增或者编辑
    if(query.id){
      res = await updateAddressHttp(query.id,form.value)
    }else{
      res = await addAddressHttp(form.value)
    }

    console.log('接口res：',res);
    
    uni.showToast({
      icon:'success',
      title: query.id?'编辑成功':'新增成功'
    })
    setTimeout(() => {
      // navigateTo 会导致navigateTo:fail webview count limit exceed，所以我还用back把。
      // uni.navigateTo({
      //   url:'/pagesMember/address/index',
      // })
      uni.navigateBack()
    }, 300);
  } catch (error) {
    uni.showToast({
      icon:'error',
      title:'请填写完整内容'
    })
  }
 
 
}
const getAddressDetail = async ()=>{
  let id = query.id
  let res =await getAddressDetailHttp(id)
  console.log('地址详情res：',res);
  Object.assign(form.value,res.result)
  
}
onLoad(()=>{
  if(query.id){
    getAddressDetail()
  }
  
})

/**
 * 表单校验
 */ 
const rules:UniHelper.UniFormsRules = {
  receiver:{
    rules:[
      {required:true,errorMessage:'请输入收货人'},
      {minLength:2,maxLength:8, errorMessage:'收货人最多8个字符'}
    ]
  },
  contact:{
    rules:[
      {required:true,errorMessage:'请输入联系人'},
      {pattern:/^1[3-9]\d{9}$/,errorMessage:'请输入正确的手机号'}
    ]
  },
  fullLocation:{
    rules:[
      {required:true,errorMessage:'请选择所在区域'},
    ]
  },
  address:{
    rules:[
      {required:true,errorMessage:'请输入详细地址'},
    ]
  }
}
</script>

<template>
  <view class="content">
    <!-- <form> -->
    <uni-forms :rules="rules" :model="form" ref="basicFormRef">
      <!-- 表单内容 -->
      <uni-forms-item name="receiver" class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </uni-forms-item>
      <uni-forms-item name="contact" class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码"  v-model="form.contact"  />
      </uni-forms-item>
      <uni-forms-item name="fullLocation" class="form-item">
        <text class="label">所在地区</text>
        <picker class="picker" mode="region" :value="form.fullLocation.split(' ')" @change="changeRegion">
          <view v-if="form.fullLocation">{{form.fullLocation}}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item name="address" class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch 
        @change="changeIsDefault"
        class="switch" color="#27ba9b" :checked="form.isDefault === 1" />
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="addOrEditAddress">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
